<template>
  <div>
    <el-dialog title="文件查看" v-model="editVisible" width="80%" height="40%" top="5vh" :close-on-click-modal="false"
      @close="handleclose">
      <div class="dialog_box">
        <iframe :src="pdfUrl" class="iframe" style="width: 100%; height: 75vh"></iframe>
      </div>
    </el-dialog>
    <!-- <pdf url="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3e51af12-a055-4f58-b1ad-7710dd05bfc4/60b3e3df-9da5-444c-8337-651316ede92b.pdf"></pdf> -->
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import api from "../api/api";
// import pdf from 'vue-pdf'
export default {
  name: "basetable",
  components: {
    // pdf
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const editVisible = ref(context.attrs.editVisible);
    console.log(context.attrs.url);
    const pdfUrl = ref("");
    if (context.attrs.url) {
      pdfUrl.value = decodeURIComponent(context.attrs.url);
    }
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    return { editVisible, pdfUrl, handleclose };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.less";

&:deep(.el-dialog__body) {
  padding: 0;
}

.iframe {
  width: 100%;
  height: 85vh;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.tabclass {
  margin: 10px 20px;
}

.tabclass span {
  font-size: 14px;
  margin-right: 20px;
  color: #666;
}

.dialog_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
